AJAX Tools

Dojo: a cross browser application toolkit

We've decided to recommend the use of the wonderful http://www.dojotoolkit.org toolkit for your AJAX enabled Fins applications. Its proficiencies go far beyond just AJAX, and includes features such as client side implimentations of crypto algorithms and client side persistent storage. It's a little complicated, mostly due to the vast scope of what they're trying to accomplish, but after a little bit of time, you'll be getting your Dojo Mojo on (sorry, couldn't resist!) At the moment, we're not bundling Dojo, but our AJAX support macros assume a copy of Dojo installed in your app's /static/javascripts directory.

AJAX Support Macros

Fins includes some macros that make it easier to perform some simple AJAX operations. Things like asyncronous form submission, and asyncronous link actions. Details of how to use these macros are available on the modref for http://hww3.riverweb.com/dist/Fins/modref/ex/predef_3A_3A/Fins/Helpers/Macros/JavaScript.html. See the SmugMug sample app for a quick example of how to use the AJAX macros.

JSON and JSON-RPC: JavaScript friendly data interchange

http://www.json.org is a lightweight data interchange format optimized for use with JavaScript applications. You can easily encode your native Pike data to JSON and send it to a waiting browser for use more quickly and easily than other formats such as XML. Additionally, JSON-RPC allows you to make cross-application method calls that are easier to produce than SOAP or even XMLRPC.

Fins includes a module, called Tools.JSON, that allows you to serialize native Pike data to a JSON format string, and conversely deserialize a JSON string into native Pike datatypes. These methods allow you to easily send and receive data in a format that JavaScript enabled browsers can easily digest.

Additionally, Fins includes some tools for generating and decoding JSON-RPC calls, both in Tools.JSON and in Fins.JSONRPCController, which will allow you to create remotely callable functions quickly and easily.

> mapping m = (["foo": 1, "bar": "gazonk"]);
> string s = Tools.JSON.serialize(m);
> s;
(1) Result: "{"bar":"gazonk","foo":1}"
> Tools.JSON.deserialize(s);
(2) Result: ([ /* 2 elements */
              "bar": "gazonk",
              "foo": 1
            ])

Gracefully degrading

Even though it's been around for years, in many ways AJAX is cutting edge technology. Not all browsers support all of the functionality needed to create AJAX apps, and even among those that do, there is a great deal of inconsistency. Dojo goes a long way toward smoothing over these rough edges. Sometimes, however, you'll run across a browser that doesn't support dojo. Perhaps, even, you want to make your AJAX functionality optional. The question then becomes, how do you provide the rich functionality and still provide a usable interface when AJAX isn't being used?

The first thing we need to be able to do is detect whether our toolkit (Dojo), has been loaded. To do this, we need some tool to tell us whether a given identifier is present. The following snippet of code will return true when a given identifier is undefined.

  var app_global = this;

  // stolen shamelessly from dojo
  function app_undef(identifier)
  {
     if(!app_global) app_global = window;

     return (typeof app_global[identifier] == "undefined");
  }

We could use it in the following way:

  if(app_undef("dojo"))
    alert("Dojo isn't available!");

Obviously, this is a simple example that doesn't get us very far. In a real world application, we'd most likely use code like this to fire off a bootstrap method from our document's onLoad event. By default, we'd write the application to use non-AJAX functionality. The bootstrap method would set up event handlers such as "onclick" and correct any URLs that would need to change when we run in AJAX mode. Using this technique gives us seamless switchover between AJAX and "old school" applications.

Good examples of these techniques can be found in the FinScribe application; look in static/javascripts/bootstrap.js, ~~templates/header.phtml~~ and templates/bottom.phtml.

Useful Resources

• http://ajaxload.info - A site that allows you to generate custom "spinners"

Not categorized | RSS Feed | BackLinks